<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1、概论 
            可以跳转的图片，称之为图像超链接
        2、语法
            <a href="">
                <img src="" alt="">
            </a>
        3、呈现特性
            鼠标悬停到图片上时，会变成小手
        4、其他属性正常使用
        5、从该案例可以得出结论---即标签是可以互相嵌套
            注意：文本类标签避免嵌套文本类标签，例如p嵌套p
    -->
    <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E8%A1%A8%E6%83%85%E5%8C%85&hs=2&pn=4&spn=0&di=166320&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3705283613%2C781066770&os=250125127%2C2608123270&simid=0%2C0&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E8%A1%A8%E6%83%85%E5%8C%85&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fimg.bjtata.com%2Fimg%2F596623fa6155615e.jpg%26refer%3Dhttp%3A%2F%2Fimg.bjtata.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1617334366%26t%3D1ff38742884d332117fb86e67e8d1c5b&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bxtvt_z%26e3BgjpAzdH3FtvijAzdH3F14w-dmbl9c8d_z%26e3Bip4s&gsm=5&islist=&querylist=">
        <img 
            src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3705283613,781066770&fm=26&gp=0.jpg" 
            alt=""
            title="鼓掌"
            width="400"
            height="200"
        >
    </a>
    <!-- 嵌套案例 -->
    <div>
        布局一
        <div>
            布局二
            <div>
                布局三
                <div>
                    布局四
                </div>
            </div>
        </div>
    </div>
    <!-- 注意：避免---文本类标签互相嵌套，如下 -->
    <p>
        段落一
        <p>
            段落二
        </p>
    </p>
</body>
</html>